<template>
	<a-descriptions
		:title="String(data.name).toUpperCase()"
		layout="vertical"
		bordered
	>
		<a-descriptions-item label="Stars">
			⭐ {{ data.stars }}
		</a-descriptions-item>
		<a-descriptions-item label="Version">
			{{ data.version }}
		</a-descriptions-item>
		<a-descriptions-item label="License">
			{{ data.license }}
		</a-descriptions-item>

		<a-descriptions-item label="Description">
			{{ data.description }}
		</a-descriptions-item>
		<a-descriptions-item label="Repository">
			<a :href="data.repository?.url" target="_blank">{{
				data.repository?.url
			}}</a>
		</a-descriptions-item>
		<a-descriptions-item label="Keywords">
			<a-badge
				style="margin: 5px"
				v-for="item in data.keywords"
				:key="item"
				:count="item"
				:number-style="{ backgroundColor: '#1890ff' }"
			/>
		</a-descriptions-item>

		<a-descriptions-item label="Assets">
			<a-collapse>
				<a-collapse-panel
					v-for="asset in data.assets"
					:key="asset.version"
					:header="asset.version"
				>
					<a-list size="small" :data-source="asset.files">
						<template v-slot:renderItem="{ item }">
							<a-list-item
								><a
									:href="
										libRepo + '/' + data.name + '/' + asset.version + '/' + item
									"
									target="_blank"
								>
									{{ item }}
								</a></a-list-item
							>
						</template>
					</a-list>
				</a-collapse-panel>
			</a-collapse>
		</a-descriptions-item>
	</a-descriptions>
</template>

<script lang="ts">
import { defineComponent, ref } from "vue";
import { useRoute } from "vue-router";
import axios from "axios";

const libRepo = "https://cdn.bootcdn.net/ajax/libs";

export default defineComponent({
	name: "about-info",

	setup() {
		const route = useRoute();
		const data = ref([] as string[]);

		axios
			.get<string[]>(
				`https://api.bootcdn.cn/libraries/${route.query.name}.min.json`
			)
			.then((res) => {
				data.value = res.data;
			});
		return {
			data,
			libRepo,
		};
	},
});
</script>

<style lang="scss">
.ant-descriptions-title {
	text-align: center;
	padding-top: 20px;
	font-size: 30px;
	font-weight: 200;
}
th.ant-descriptions-item-label {
	font-weight: bold;
}
</style>
